 <script src="/js/pusher.min.js" type="text/javascript"></script>
 <script type="text/javascript">
    /* Enable pusher logging - don't include this in production
    Pusher.log = function(message) {
      if (window.console && window.console.log) window.console.log(message);
    };
	*/
	
    // Flash fallback logging - don't include this in production
    //WEB_SOCKET_DEBUG = true;
	var key = "{$key}";
    var pusher = new Pusher('c0c3aacfc524266f48fe');
    var channel = pusher.subscribe('test_channel');
    channel.bind('my_event', function(data) {
    	if(data.key != key)
    	{
    		postMessage(data.msg, data.nickname);
    	}
    });
    
    function postMessage(msg, nickname)
    {    	    
    	var user = $("#user").val();
    	var content = "";
    	
    	if(user == "") user = "Me"; 
    	
    	if(typeof(msg) == "undefined")
    	{
    		if($("#message").val() == "") return false;
    		
    		msg = $("#message").val();
    		sendMessage();
    	}
    	else
    	{
    		user = nickname;
    	}
    	
    	content = user + ": " + msg + "<br>";
    	$("#content").append(content);    	    	
    }
    
    function sendMessage()
    {
    	try{
	    	var data = {
				msg: $("#message").val(), 
				nickname: $("#user").val(),
				key: key
			};
	    	
	    	$.ajax({
	            url : '/home/postchat',
	            type : 'post',
	            data : data,
	            dataType : 'json',
	            success : function(data)
	            {
	                if(data == true){
	                	console.log("Send success");
	                }
	                else
	                {
	                	console.log("Send failure");
	                }
	            }
	        });
    	}
    	catch(ex)
    	{
    		alert("Err: " + ex);
    	}
    	
    	$("#message").val("");
    }
    
    $(function(){
    	$('#message').keydown(function(e){
    		if(e.keyCode == 13)
    		{
    			postMessage();
    		}
    	});
    });
  </script>
  Your name: <input type="text" id="user" style="width:100px;"/>
  <br>
  
  <div id='content' style="width:500px; overflow: auto; height:300px; border: blue 1px solid;">
  </div>
  <br>
  <input type="text" id="message" style="width:200px;" />
  <button onclick="postMessage();">Reply</button>
  
  